<template>
  <van-nav-bar
    title="搜索"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.back('/');
      }
    "
  />

  <van-search
    v-model="searchVal"
    shape="round"
    placeholder="请输入搜索关键词"
  />

  <template v-if="searchData.length==0||searchVal.length==0">
    <van-empty description="暂无搜索数据" />
  </template>
  <template v-else>
    <!-- 单元格 -->
    <van-cell-group v-for="item in searchData">
      <router-link :to="'/detail/' + item.goods_id">
        <van-cell :title="item.goods_name" />
      </router-link>
    </van-cell-group>
  </template>
</template>

<script setup>
import { ref, watch } from "vue";
import { searchApi } from "@/api/api";

let searchVal = ref("");
let searchData = ref([]);
//监听--防抖
import _ from 'lodash'
watch(searchVal, _.debounce((searchVal) => {
  searchApi(searchVal).then((res) => {
    console.log("搜索数据", res);
    searchData.value = res.data.message;
  });
},3000));
</script>

<style lang="scss" scoped></style>
